<template>
	<div class="logo">
		<router-link :to="{name:'home'}">
			<!-- <logo-svg alt="logo" /> -->
			<img src="@/assets/logo.svg" class="logo" alt="logo">
			<h1 v-if="showTitle">{{ title }}</h1>
		</router-link>
	</div>
</template>

<script>
	
	export default {
		name: "SpLogo",
		
		props: {
			
			title: {
				type: String,
				default: 'SP-Admin',
				required: false
			},
			showTitle: {
				type: Boolean,
				default: true,
				required: false
			}
		},
	}
		
	
</script>

<style>
	
	.sider .logo {
		position: relative;
		height: 64px;
		padding-left: 10px;
		overflow: hidden;
		line-height: 64px;
		background: #002140;
		-webkit-transition: all .3s;
		transition: all .3s;
	}
	
	.sider .logo img,
	.sider .logo svg {
		height: 32px;
		/* width: 32px; */
	}
	
	.sider .logo h1,
	.sider .logo img,
	.sider .logo svg {
		display: inline-block;
		vertical-align: middle;
	}
	
	svg:not(:root) {
		overflow: hidden;
	}
	
	.sider .logo h1 {
		color: #fff;
		font-size: 20px;
		margin: 0 0 0 12px;
		font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
		font-weight: 600;
		vertical-align: middle;
	}
	
	.sider .logo h1,
	.sider .logo img,
	.sider .logo svg {
		display: inline-block;
		vertical-align: middle;
	}
</style>
